<template>
    <div class="main" style="background: #f2f3f5;">
        <div class="head">
            <div class="header-inner" v-show="token!=''">
                <img :src="dataBase.avatarUrl">
                <div>
                    <p class="name">{{dataBase.nick}}</p>
                    <div>
                        <span class="word">ID {{dataBase.id}}</span>
                        <span class="char">|</span>
                        <span class="word">成长值 {{dataLevel.upgradeScore}}</span>
                        <span class="char">|</span>
                        <span class="word">段位 {{dataLevel.name}}</span>
                    </div>
                </div>
                <div class="data">个人资料</div>
            </div>
            <div class="header-inner" v-if="token==''">
                <img
                    src="">
                <div>
                    <p class="name" @click="goLogin">登录/注册</p>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="group"></div>
            <div class="group">
                <div class="money">
                    <div class="money-item">
                        <div class="value" v-show="token!=''">{{scoreData.score}}</div>
                        <div class="value" v-if="token==''">--</div>
                        <p>积分</p>
                    </div>
                    <div class="money-item">
                        <div class="value" v-show="token!=''">{{discounts.canFetch}}</div>
                        <div class="value" v-if="token==''">--</div>
                        <p>优惠券</p>
                    </div>
                    <div class="money-item">
                        <div class="value" v-show="token!=''">{{scoreData.balance}}</div>
                        <div class="value" v-if="token==''">--</div>
                        <p>余额</p>
                    </div>
                </div>
            </div>
            <div class="group">
                <div class="order">
                    <div class="group-head">
                        <div style="fontSize: .56rem;fontWeight: 700;">我的订单</div>
                        <div>
                            <span @click="goOrder">查看全部订单</span>
                            <van-icon name="arrow" size=".56rem" color="#969799" />
                        </div>
                    </div>
                    <div class="order-list">
                        <div class="list-item">
                            <van-icon name="pending-payment" size=".96rem" />
                            <p>待付款</p>
                        </div>
                        <div class="list-item">
                            <van-icon name="clock-o" size=".96rem" />
                            <p>待发货</p>
                        </div>
                        <div class="list-item">
                            <van-icon name="logistics" size=".96rem" />
                            <p>待收货 </p>
                        </div>
                        <div class="list-item">
                            <van-icon name="comment-o" size=".96rem" />
                            <p>评价</p>
                        </div>
                        <div class="list-item">
                            <van-icon name="after-sale" size=".96rem" />
                            <p>退款/售后</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="group">
                <div class="power">
                    <div class="group-head">
                        <div style="fontSize: .56rem;fontWeight: 700;">常用功能</div>
                    </div>
                    <div class="tool-list">
                        <div class="tool-item">
                            <van-icon name="balance-o" size=".96rem" />
                            <p>我的钱包</p>
                        </div>
                        <div class="tool-item">
                            <van-icon name="point-gift-o" size=".96rem" />
                            <p>积分兑换</p>
                        </div>
                        <div class="tool-item">
                            <van-icon name="coupon-o" size=".96rem" />
                            <p>优惠券</p>
                        </div>
                        <div class="tool-item">
                            <van-icon name="location" size=".96rem" />
                            <p>收货地址</p>
                        </div>
                        <div class="tool-item">
                            <van-icon name="after-sale" size=".96rem" />
                            <p>设置</p>
                        </div>
                        <div class="tool-item">
                            <van-icon name="after-sale" size=".96rem" />
                            <p>主体</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="copyright">
                <a href="https://github.com/JoeshuTT/v-shop">Copyright © 2019-2022 v-shop | v2 </a>
                <p>最后发布时间：202208161505</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataBase: {},
            dataLevel: {},
            scoreData: "",
            discounts: "",
            token: "",
        }
    },
    methods: {
        goLogin() {
            this.$router.push("/login")
        },
        goOrder(){
            this.$router.push("/order")
        }
    },
    mounted() {
        if (window.localStorage.getItem('token')) {
            this.token = window.localStorage.getItem('token')
        }
        // 个人信息
        this.request({
            method: "get",
            url: "/user/detail"
        }).then(res => {
            console.log(res)
            this.dataBase = res.data.base
            this.dataLevel = res.data.userLevel
        }).catch(err => {
            this.token = ""
        })

        // 积分余额
        this.request({
            method: "get",
            url: "/user/amount"
        }).then(res => {
            this.scoreData = res.data
        })

        // 优惠券
        this.request({
            method: "get",
            url: "/discounts/statistics"
        }).then(res => {
            this.discounts = res.data
        })
    }
}
</script>

<style scoped>
.main {
    height: calc(100vh - 2rem);
    overflow: auto;
}

.head {
    width: 15rem;
    height: 7.2rem;
    background: #1ba784;
    padding-top: 1.2rem;
    box-sizing: border-box;
}

.header-inner {
    box-sizing: border-box;
    display: flex;
    color: #fff;
    padding: 0 .6rem;
    position: relative;
    align-items: center
}

.header-inner img {
    width: 2.8rem;
    height: 2.8rem;
    margin-right: .4rem;
    border-radius: 50%;
    z-index: 20;
}

.name {
    font-size: .8rem;
    margin-bottom: 20px;
}

.word {
    font-size: .48rem;
}

.char {
    font-size: .48rem;
    margin: 0 .2rem;
}

.data {
    font-size: .48rem;
    background: rgba(0, 0, 0, .2);
    width: 2.56rem;
    height: .8rem;
    line-height: .8rem;
    border-radius: .4rem 0 0 .4rem;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.content {
    background: #f2f3f5;
}

.group {
    box-sizing: border-box;
    border-radius: 2.13vw;
    overflow: hidden;
    background: #fff;
    margin: 0 4vw 4vw 4vw;
}

.money {
    display: flex;
    height: 2.56rem;
    width: 13.8rem;
}

.money-item {
    box-sizing: border-box;
    flex: 1;
    padding: .4rem 0;
    text-align: center;
}

.money-item .value {
    font-size: .64rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.money-item {
    font-size: .48rem;
}

.group-head {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 1.92rem;
    padding: 0 .6rem;
    justify-content: space-between;
    border-bottom: 1px solid #f2f3f5;
}

.group-head span {
    font-size: .48rem;
    color: #969799;
}

.order-list {
    box-sizing: border-box;
    padding: .4rem 0;
    display: flex;
}

.list-item {
    font-size: .48rem;
    color: #323233;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tool-list {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.tool-item {
    font-size: .48rem;
    color: #323233;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.list-item p {
    margin-top: .2rem;
}

.copyright {
    padding: .8rem 0 .4rem;
    color: #969799;
    font-size: .48rem;
    text-align: center;
    line-height: .72rem;
}

.copyright a {
    color: #969799;
}
</style>